<template>
  <div class="app-container">
    <el-row id="title" type="flex" align="middle">

      <el-col :span="2">
        <el-select v-model="queryParams.type" placeholder="选择单据类型" clearable>
          <el-option label="资产入库" value="type1"></el-option>
          <el-option label="资产派发" value="type2"></el-option>
          <el-option label="资产退库" value="type3"></el-option>
          <el-option label="资产借出" value="type4"></el-option>
          <el-option label="资产归还" value="type5"></el-option>
          <el-option label="资产调拨" value="type6"></el-option>
          <el-option label="资产维修" value="type7"></el-option>
          <el-option label="资产变更" value="type8"></el-option>
          <el-option label="资产处理" value="type9"></el-option>
          <el-option label="资产盘点" value="type10"></el-option>
          <el-option label="资产交接" value="type11"></el-option>
          <el-option label="耗材入库" value="type12"></el-option>
          <el-option label="耗材派发" value="type13"></el-option>
          <el-option label="耗材处理" value="type14"></el-option>
          <el-option label="采购申请" value="type15"></el-option>
          <el-option label="采购订单" value="type16"></el-option>
          <el-option label="收货管理" value="type17"></el-option>
          <el-option label="保养计划" value="type18"></el-option>
          <el-option label="保养任务" value="type19"></el-option>
          <el-option label="保养执行" value="type20"></el-option>
          <el-option label="保养变更" value="type19"></el-option>
        </el-select>
      </el-col>

      <el-col :span="4">
        <el-date-picker v-model="queryParams.applyDate" type="date" placeholder="申请日期" />
      </el-col>

      <el-col :span="2">
        <el-select v-model="queryParams.number" placeholder="单据编号" clearable>
          <!-- <el-option v-for="option in documentNumbers" :key="option" :label="option" :value="option"></el-option> -->
        </el-select>
      </el-col>


      <el-col :span="4">
        <el-input v-model="input" placeholder="请输入内容"></el-input>
      </el-col>

      <el-col :span="12" class="toolbar">
        <div class="button-group">
          <el-button @click="reset">重置</el-button>
          <el-button @click="approve" class="Approval">审批</el-button>

        </div>
        <right-toolbar :showSearch.sync="showSearch" @queryTable="Refresh"></right-toolbar>
      </el-col>
    </el-row>
    <vxe-table v-loading="tableData.loading" :data="tableData.list" border highlight-current-row class="data-table">
      <vxe-column field="applyNumber" title="单据编号">
        <template #default="{ row }">
          <el-button link type="primary" @click="handleDetail(row)">{{ row.applyNumber }}</el-button>
        </template>
      </vxe-column>
      <vxe-column field="applyTypeName" title="单据类型" />
      <vxe-column field="applyUserName" title="申请人" />
      <vxe-column field="applyCompanyName" title="申请公司" />
      <vxe-column field="applyDeptName" title="申请部门" />
      <vxe-column field="applyTime" title="申请日期">
        <template #default="{ row }">
          {{ row.applyTime }}
        </template>
      </vxe-column>
    </vxe-table>

    <div class="pagination-container">
      <pagination v-show="tableData.paging.total > 0" :total="tableData.paging.total"
        v-model:page="tableData.paging.pageNum" v-model:limit="tableData.paging.pageSize" @pagination="getList" />
    </div>

    <TodoDetail ref="todoDetailDialog" @sub="getList"></TodoDetail>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue';
import api from "./api.js";
import TodoDetail from "./detail/index.vue";
const { proxy } = getCurrentInstance();
const todoDetailDialog = ref();

const documentNumbers = ['编号1', '编号2', '编号3', '编号4'];

const queryParams = reactive({
  type: '',
  applyDate: '',
  number: '',
});

const tableData = reactive({
  loading: false,
  list: [],
  paging: {
    total: 0,
    pageNum: 1,
    pageSize: 10,
  },
});


function getList() {
  tableData.loading = true;
  const { pageNum, pageSize } = tableData.paging;
  const pageReq = { page: pageNum - 1, size: pageSize };

  api.list({ ...queryParams }, pageReq).then(response => {
    const { content, totalElements } = response;
    content.forEach(item => {
      if (!item.apply) {
        item.apply = {};
      }
    })
    tableData.list = content;
    tableData.paging.total = totalElements;
    tableData.loading = false;

  }).catch(() => {
    tableData.loading = false;
  });
}
function Refresh() {
  proxy.$message.success("刷新成功");
}

function handleDetail(row) {
  todoDetailDialog.value.open(row);
}


function refresh() {
  getList();
}


function reset() {
  queryParams.type = '';
  queryParams.applyDate = '';
  queryParams.number = '';
  getList();
}


function approve() {
  console.log('审批功能待实现');
}


onMounted(() => {
  getList();
});
</script>


<style lang="scss" scoped>
.app-container {
  display: flex;
  flex-direction: column;
  height: 92vh;
  overflow: hidden;
  padding: 11px;
  background-color: #f5f5f5;
}

.top-bar {
  padding-bottom: 10px;
}

.mb8 {
  margin-bottom: 8px;
}

#title {
  margin-bottom: 12px;
  display: flex;
  justify-content: space-between;

}

.data-table {
  flex: 1;
  overflow: auto;
  background-color: #fff;
  border-radius: 4px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

.pagination-container {
  display: flex;
  justify-content: flex-end;
  padding: 10px 0;
}

.button-group {
  display: flex;
  gap: 10px;
  justify-content: flex-end;

}

.Approval {
  color: #fff;
  background-color: #005bf5;
}

button {
  transition: background-color 0.3s, box-shadow 0.3s;
}

button:hover {
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}

.toolbar {
  display: flex;
  justify-content: flex-end;

}
</style>
